<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/base.css" rel="stylesheet"/>
    <script src="js/jquery1.42.min.js" type="text/javascript"></script>
    <script src="js/jquery.SuperSlide.2.1.3.js" type="text/javascript"></script>
    <script src="js/flexible.min.js" type="text/javascript"></script>
    <title>首页</title>
</head>
<body>
<div>
    <!-- 轮播图-->
    <div id="slideBox" class="slideBox">
        <div class="hd scoll_list">
            <ul><li></li><li></li><li></li></ul>
        </div>
        <div class="bd scoll">
            <ul>
                <c:forEach items="${indexData.slideshowImg}" var="slideshowImg">
                    <li><img src="${slideshowImg.path}" width="100%" /></li>
                </c:forEach>

            </ul>
        </div>
    </div>

    <script type="text/javascript">
        jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});
    </script>
    <!--专业礼品回收-->
    <div class="gift">
        <div class="gift_title"><span></span>专业礼品卡回收服务<span></span></div>
        <div class="gift_list">
            <c:forEach items="${indexData.commodityClass}" var="commodityClass">
                <div>
                    <a href="/mobile/sellCard?commodityClassId=${commodityClass.id}&commodityClassName=${commodityClass.name}&type=0">
                        <img src="${commodityClass.logo}">
                        <div>${commodityClass.name}</div>
                    </a>
                </div>
            </c:forEach>
    </div>
    <!-- 公告-->
    <div class="accouncement">
        <img src="img/accounement.png">
        <!-- 无缝滚动-->
        <div class="txtMarquee-top">
            <div class="bd marquee">
                <ul class="infoList">
                    <c:forEach items="${indexData.notes}" var="note">
                        <li><span class="date">${note.title}</span>${note.content}</li>
                    </c:forEach>

                </ul>
            </div>
        </div>
        <%--<script type="text/javascript">--%>
            <%--jQuery(".txtMarquee-top").slideDown({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:5,interTime:50});--%>
        <%--</script>--%>
        <script type="text/javascript">
            function x() {
                var  ul=$(".infoList");
                var  i=0;
                ul.html(ul.html()+ul.html());
                setInterval(function(){
                    if(i<$(".infoList li").length-1){
                        $(".infoList li")[i].style.display="none";
                        i++;
                        $(".infoList li")[i].style.display="block";
                    }else{
                        i=0;
                    }
                },2000)
            }
            x();
        </script>
    </div>
    <!-- 热门回收-->
    <div class="remen">
        <div class="recyling_title">热门回收</div>
        <div>
            <ul class="recycling">
                <c:forEach items="${indexData.hotCommodityList}" var="hotCommodity">
                    <li><a href="/mobile/sellCard?commodityClassId=${hotCommodity.classId}&commodityId=${hotCommodity.id}&commodityClassName=${hotCommodity.className}&type=1&commodityName=${hotCommodity.name}">
                        <img src="${hotCommodity.imgPath}">
                        <div class="recyling_card">${hotCommodity.name}</div>
                        <div class="recyling_discount">${hotCommodity.discount}折</div>
                    </a></li>
                </c:forEach>
            </ul>
        </div>
    </div>
</div>
<div class="fount">
    <div>
        <a href="/mobile/index">
            <img src="img/home.png">
            <div class="active">首页</div>
        </a>
    </div>
    <div>
        <a href="/mobile/classification">
            <img src="img/hy123.png">
            <div>分类</div>
        </a>
    </div>
    <div>
        <a href="/mobile/sellCard">
            <img src="img/hy11.png">
            <div>卖卡</div>
        </a>
    </div>
    <div>
        <a href="/mobile/toMyInfo">
            <img src="img/my.png">
            <div>我的</div>
        </a>
    </div>

    </div>
</div>
</body>
</html>